<template>
  <div class="app-container">
    <el-form
      v-show="showSearch"
      ref="queryForm"
      :inline="true"
      :model="queryParams"
      label-width="68px"
      size="small">
      <el-form-item
        label=""
        prop="id">
        <el-input
          v-model="queryParams.id"
          class="searchInputStyle"
          clearable
          placeholder="请输入用户ID"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item
        label=""
        prop="nickName">
        <el-input
          v-model="queryParams.nickName"
          class="searchInputStyle"
          clearable
          placeholder="请输入用户昵称"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item
        label=""
        prop="phoneNum">
        <el-input
          v-model="queryParams.phoneNum"
          class="searchInputStyle"
          clearable
          placeholder="请输入手机号"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item
        label=""
        prop="openId">
        <el-input
          v-model="queryParams.openId"
          class="searchInputStyle"
          clearable
          placeholder="请输入openID"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item
        label=""
        prop="masterAccountId">
        <el-input
          v-model="queryParams.masterAccountId"
          class="searchInputStyle"
          clearable
          placeholder="请输入主账户ID"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="" prop="marker">
        <el-select
          v-model="queryParams.marker"
          class="searchInputStyle"
          clearable
          placeholder="用户标记"
          size="small">
          <el-option
            v-for="(item,index) in marker"
            :key="item"
            :label="item"
            :value="index"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="timeExport">
        <el-date-picker
          v-model="queryParams.timeExport"
          :default-time="['00:00:00', '23:59:59']"
          align="right"
          class="searchInputStyle"
          clearable
          end-placeholder="结束日期"
          range-separator="至"
          start-placeholder="开始日期"
          style="width: 250px"
          type="daterange"
          value-format="timestamp"
          @change="timeChange">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-s-custom"
          plain
          size="mini"
          type="warning"
          @click="onlyAdmin">{{ adminText }}
        </el-button>
        <el-button
          icon="el-icon-search"
          size="mini"
          type="primary"
          @click="handleQuery">搜索
        </el-button>
        <el-button
          icon="el-icon-refresh"
          size="mini"
          @click="resetQuery">重置
        </el-button>
      </el-form-item>
    </el-form>

    <el-row
      :gutter="10"
      class="mb8">
      <!--      <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
                v-hasPermi="['business:consumer:add']"
              >新增
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="success"
                plain
                icon="el-icon-edit"
                size="mini"
                :disabled="single"
                @click="handleUpdate"
                v-hasPermi="['business:consumer:edit']"
              >修改
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                size="mini"
                :disabled="multiple"
                @click="handleDelete"
                v-hasPermi="['business:consumer:remove']"
              >删除
              </el-button>
            </el-col>-->
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['business:consumer:export']"
          icon="el-icon-download"
          plain
          size="mini"
          type="warning"
          @click="handleExport"
        >导出
        </el-button>
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="consumerList"
      :stripe="true"
      @selection-change="handleSelectionChange">

      <el-table-column
        align="center"
        label="用户ID"
        prop="id">
        <template v-slot="scope">
          <span @click="onCopy(scope.row.id)">
            {{ scope.row.id }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="用户昵称"
        prop="nickName">
        <template v-slot="scope">
          <span @click="onCopy(scope.row.nickName)">
            {{ scope.row.nickName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="手机号"
        prop="phoneNum"
        width="110">
        <template v-slot="scope">
        <span @click="onCopy(scope.row.phoneNum)">
            {{ scope.row.phoneNum }}
          </span>
        </template>
      </el-table-column>
      <!--      <el-table-column
              width="120"
              align="center"
              label="openID"
              prop="openId"
              show-overflow-tooltip>
              <template v-slot="scope">
                <span @click="onCopy(scope.row.openId)">
                  {{ scope.row.openId }}
                </span>
              </template>
            </el-table-column>-->
      <el-table-column align="center" label="注册时间" prop="createTime">
        <template v-slot="scope">
          {{ parseTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="用户标记" prop="marker" width="90">
        <template slot-scope="scope">
          <el-tag :type="scope.row.marker == 0 ? '' : 'warning'" effect="plain">
            {{ marker[scope.row.marker] }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否管理员" prop="marker" width="90">
        <template slot-scope="scope">
          <el-tag :type="scope.row.isManager ? '' : 'warning'" effect="plain">
            {{ scope.row.isManager ? '管理员' : '普通用户' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="首充场站" prop="firstStationName">
        <template v-slot="scope">
          <span @click="onCopy(scope.row.firstStationName)">
            {{ scope.row.firstStationName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="主账户ID" prop="masterAccountId">
        <template v-slot="scope">
          <span @click="onCopy(scope.row.masterAccountId)">
            {{ scope.row.masterAccountId }}
          </span>
          <el-button
            :class="['text-button', { 'active': active===scope.$index+'Detail' }]"
            size="mini"
            type="text"
            @click="getAccountDetail(scope.row.id,scope.row.phoneNum),active=scope.$index+'Detail'"
          >详情
          </el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="用户积分" prop="masterAccountId">
        <template v-slot="scope">
          <span @click="onCopy(scope.row.masterAccountId)">
            {{ scope.row.masterAccountId }}
          </span>
          <el-button
            :class="['text-button', { 'active': active===scope.$index+'Detail' }]"
            size="mini"
            type="text"
            @click="getAccountDetail(scope.row.id,scope.row.phoneNum),active=scope.$index+'Detail'"
          >详情
          </el-button>
        </template>
      </el-table-column>
      <!--      <el-table-column label="unID" align="center" prop="unionId" />-->
      <!--      <el-table-column label="协议授权" align="center" prop="agreementAuthorization" />
            <el-table-column label="最后修改时间" align="center" prop="lastUpdateTime" />
            <el-table-column label="主账户ID" align="center" prop="masterAccountId" />
            <el-table-column label="版本" align="center" prop="version" />-->
      <el-table-column
        align="center"
        class-name="small-padding fixed-width"
        label="记录">
        <template slot-scope="scope">
          <el-button
            v-hasPermi="['business:consumer:edit']"
            :class="['text-button', { 'active': active===scope.$index+'handleOpenCharge' }]"
            size="mini"
            type="text"
            @click="handleOpenCharge(scope.row),active=scope.$index+'handleOpenCharge'"
          >充电
          </el-button>
          <el-button
            v-hasPermi="['business:consumer:edit']"
            :class="['text-button', { 'active': active===scope.$index+'handleOpenPayrank' }]"
            size="mini"
            type="text"
            @click="handleOpenPayrank(scope.row),active=scope.$index+'handleOpenPayrank'"
          >支付
          </el-button>
<!--          <el-button
            v-hasPermi="['business:consumer:edit']"
            :class="['text-button', { 'active': active===scope.$index+'handleOpenPayrank' }]"
            size="mini"
            type="text"
            @click="handleOpenPayrank(scope.row),active=scope.$index+'handleOpenPayrank'"
          >积分
          </el-button>-->
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        class-name="small-padding fixed-width"
        label="操作">
        <template slot-scope="scope">
          <el-button
            v-hasPermi="['business:consumer:edit']"
            :class="['text-button', { 'active': active===scope.$index+'handleUpdate' }]"
            icon="el-icon-edit"
            size="mini"
            type="text"
            @click="handleUpdate(scope.row),active=scope.$index+'handleUpdate'"
          >编辑
          </el-button>
          <!--<el-button
            v-if="scope.row.isManager"
            size="mini"
            type="text"
            icon="el-icon-setting"
            @click="handleWx(scope.row)"
            v-hasPermi="['business:consumer:remove']"
          >小程序功能管理
          </el-button>
          <el-button
            v-if="scope.row.isManager"
            size="mini"
            type="text"
            icon="el-icon-setting"
            @click="handleStation(scope.row)"
            v-hasPermi="['business:consumer:remove']"
          >场站功能管理
          </el-button>-->
          <el-dropdown v-if="scope.row.isManager" v-hasPermi="['business:consumer:remove']" trigger="click">
            <span class="el-dropdown-link" style="color: #409EFF">
              <i class="el-icon-setting el-icon--right"></i>管理功能
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-menu">
                <el-button
                  v-if="scope.row.isManager"
                  v-hasPermi="['business:consumer:remove']"
                  size="mini"
                  type="text"
                  @click="handleWx(scope.row)"
                >小程序功能管理
                </el-button>
              </el-dropdown-item>
              <el-dropdown-item divided icon="el-icon-menu">
                <el-button
                  v-if="scope.row.isManager"
                  v-hasPermi="['business:consumer:remove']"
                  size="mini"
                  type="text"
                  @click="handleStation(scope.row)"
                >场站功能管理
                </el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :limit.sync="queryParams.pageSize"
      :page.sync="queryParams.pageNum"
      :total="total"
      @pagination="getList"
    />
    <!-- 账户详情 -->
    <el-dialog
      :title="accountTitle"
      :visible.sync="accountOpen"
      append-to-body
      width="1500px">
      <account-detail :master-account="masterAccount" :sub-accounts="subAccounts" :phone-num="phoneNum"
                      @myEvent="getAccountDetail(accountDetailId)"></account-detail>
      <div
        slot="footer"
        class="dialog-footer">
        <!--        <el-button
                  type="primary"
                  @click="submitForm">确 定
                </el-button>-->
        <el-button @click="accountOpen=!accountOpen">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改用户统计对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      append-to-body
      width="500px">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px">
        <el-form-item
          label="名称"
          prop="nickName">
          <el-input
            v-model="form.nickName"
            placeholder="请输入名称"/>
        </el-form-item>
        <el-form-item
          label="手机号"
          prop="phoneNum">
          <el-input
            v-model="form.phoneNum"
            disabled
            placeholder="请输入手机号"/>
        </el-form-item>
        <el-form-item
          label="主账户ID"
          prop="masterAccountId">
          <el-input
            v-model="form.masterAccountId"
            disabled
            placeholder="请输入主账户ID"/>
        </el-form-item>
        <el-form-item
          label="openId"
          prop="openId">
          <el-input
            v-model="form.openId"
            disabled
            placeholder="请输入openId"/>
        </el-form-item>
        <el-form-item
          label="用户标记"
          prop="marker">
          <el-select
            v-model="form.marker"
            clearable
            placeholder="用户标记"
            size="small">
            <el-option
              v-for="(item,index) in marker"
              :key="item"
              :label="item"
              :value="index"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="是否是管理员"
          prop="isManager"
        >
          <el-switch
            v-model="form.isManager"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer">
        <el-button
          type="primary"
          @click="submitForm">确 定
        </el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 充值记录列表 -->
    <el-dialog
      :title="payrankTitle"
      :visible.sync="payrankOpen"
      append-to-body
      fullscreen
      width="80%">
      <el-table
        v-loading="loading"
        :data="payrankList"
        height="720">
        <el-table-column
          align="center"
          label="支付订单id"
          prop="payId"/>
        <el-table-column
          align="center"
          label="商户订单号"
          prop="businessId"/>
        <el-table-column
          align="center"
          label="微信订单号"
          prop="wxPayId"/>
        <el-table-column
          align="center"
          label="用户账户ID"
          prop="consumerAccountId"/>
        <el-table-column
          align="center"
          label="openid"
          prop="openid"/>
        <el-table-column
          align="center"
          label="订单类型"
          prop="payType">
          <template v-slot="scope">
            {{ payTypeList[scope.row.payType]}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="支付金额"
          prop="payMoneyTotal">
          <template v-slot="scope">
            {{ scope.row.payMoneyTotal / 100 }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="支付状态"
          prop="status">
          <template slot-scope="scope">
            {{ findStatus(scope.row.status) }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="下单时间"
          prop="creatTime">
          <template v-slot="scope">
            {{ parseTime(scope.row.creatTime) }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="退款金额"
          prop="refundMoney">
          <template v-slot="scope">
            {{ scope.row.refundMoney / 100 }}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="分账标记"
          prop="profitSharing">
          <template slot-scope="scope">
            {{ profitSharing[scope.row.profitSharing] }}
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="payrankTotal>0"
        :limit.sync="payrankQueryParams.pageSize"
        :page.sync="payrankQueryParams.pageNum"
        :total="payrankTotal"
        @pagination="getPayrankList"
      />
      <div
        slot="footer"
        class="dialog-footer">
        <el-button
          type="primary"
          @click="payrankOpen=false">确 定
        </el-button>
        <!--        <el-button @click="cancel">取 消</el-button>-->
      </div>
    </el-dialog>
    <!-- 充电记录列表 -->
    <el-dialog
      :title="orderTitle"
      :visible.sync="orderOpen"
      append-to-body
      width="80%">
      <el-table
        v-loading="loading"
        :data="orderList"
        height="534">
        <el-table-column
          align="center"
          label="订单号"
          prop="orderId"/>
        <el-table-column
          align="center"
          label="充电地点"
          prop="stationName"/>
        <el-table-column
          align="center"
          label="设备名称"
          prop="deviceName"/>
        <el-table-column
          align="center"
          label="枪口号"
          prop="chargePort"/>
        <el-table-column
          align="center"
          label="开始充电时间"
          prop="createTime"
          width="150">
          <template v-slot="scope">
            {{ parseTime(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="结束充电时间"
          prop="createTime"
          width="150">
          <template v-slot="scope">
            {{ parseTime(scope.row.chargeEndTime) }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="充电时长"
          prop="formatTime"
          width="150"/>

        <el-table-column
          align="center"
          label="订单状态"
          prop="orderStatus">
          <template v-slot="scope">
            {{ orderStatus[scope.row.orderStatus] }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="充电电量(度)"
          prop="chargeElectricity">
          <template v-slot="scope">
            {{ scope.row.chargeElectricity }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="消费额"
          prop="orderStatus">
          <template v-slot="scope">
            {{ (scope.row.chargeFee + scope.row.serviceFee + scope.row.parkFee) / 100 }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="订单来源"
          prop="chargeType"/>
      </el-table>

      <pagination
        v-show="orderTotal>0"
        :limit.sync="orderParams.pageSize"
        :page.sync="orderParams.pageNum"
        :total="orderTotal"
        @pagination="getOrderInfoParams"
      />
      <div
        slot="footer"
        class="dialog-footer">
        <el-button
          type="primary"
          @click="orderOpen=false,reset()">确 定
        </el-button>
        <!--        <el-button @click="cancel">取 消</el-button>-->
      </div>
    </el-dialog>

    <el-dialog
      :title="orderTitle"
      :visible.sync="wxOpen"
      append-to-body
      width="35%">
      <el-transfer
        v-model="dataWxSelected"
        :data="dataWxmodel"
        :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}'
        }"
        :props="{
          key: 'id',
          label: 'moduleName'
        }"
        :right-default-checked="dataWxSelectRight"
        :titles="['未选择', '已选择']"
        target-order="push"
        @change="selected"
        @right-check-change="getOrderBy">
        <el-button slot="right-footer" class="transfer-footer" size="small"
                   @click="moveElement(dataWxSelected,dataWxSelectRight[0],-1)">上
        </el-button>
        <el-button slot="right-footer" class="transfer-footer" size="small"
                   @click="moveElement(dataWxSelected,dataWxSelectRight[0],+1)">下
        </el-button>
      </el-transfer>
      <div
        slot="footer"
        class="dialog-footer">
        <el-button
          type="primary"
          @click="wxOpen=false,saveWxModel()">确 定
        </el-button>
        <!--        <el-button @click="cancel">取 消</el-button>-->
      </div>
    </el-dialog>
    <el-dialog
      :title="orderTitle"
      :visible.sync="stationOpen"
      append-to-body
      width="45%">
      <el-transfer
        v-model="dataStationSelected"
        :data="dataStationModel"
        :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}'
        }"
        :props="{
          key: 'id',
          label: 'stationName'
        }"
        :titles="['未选择', '已选择']"
        class="stationCustom"
        filterable
        target-order="push"
      >
      </el-transfer>
      <div
        slot="footer"
        class="dialog-footer">
        <el-button
          type="primary"
          @click="stationOpen=false,saveStationModel()">确 定
        </el-button>
        <!--        <el-button @click="cancel">取 消</el-button>-->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listConsumer,
  getConsumer,
  delConsumer,
  addConsumer,
  updateConsumer,
  getOrderInfo,
  getAccountDetail,
  getAppletManagerModule,
  saveConsumerManagerModules,
  getStationManagerModule,
  saveConsumerStationManagerModules
} from '@/api/business/consumer'
import {listPayrank} from '@/api/business/payrank'
import accountDetail from "@/views/business/consumer/components/accountDetail.vue";

const marker = ['白名单', '黑名单']

const profitSharing = {
  0: '不可分账', 1: '可以分账', 2: '已分账'
}
const statusList = {
  0: '创建',
  1: '支付成功',
  2: '未支付',
  3: '已关闭',
  4: '转入退款',
  5: '退款成功',
  6: '退款关闭',
  7: '退款异常',
  8: '退款处理中'
}
const orderStatus = {
  0: "创建预订单",
  1: "加入开电队列",
  2: "发出开电指令",
  3: "开电成功",
  4: "停止充电",
  5: "结算订单",
  6: "订单关闭",
  7: "支付失败"
}

const payTypeList = {
  0: '开电订单',
  1: '余额充值',
  2: '地锁订单',
  3: '系统充值',
  4: '扫码富预下单',
  5: '买支付卡',
  6: '全民付'
}
export default {
  name: 'Consumer',
  data() {
    return {
      marker,
      profitSharing,
      orderStatus,
      payTypeList,
      active: null,
      accountOpen: false,
      accountTitle: '账户详情',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      payrankTotal: 0,
      orderTotal: 0,
      orderList: [],
      // 支付记录
      payrankList: [],
      // 用户统计表格数据
      consumerList: [],
      // 弹出层标题
      title: '',
      payrankTitle: '',
      orderTitle: '',
      // 是否显示弹出层
      open: false,
      payrankOpen: false,
      orderOpen: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        id: null,
        nickName: null,
        phoneNum: null,
        openId: null,
        unionId: null,
        agreementAuthorization: null,
        lastUpdateTime: null,
        masterAccountId: null,
        version: null,
        beginTime: null,
        endTime: null,
        timeExport: [],
        marker: null,
        isManager: false
      },
      orderParams: {
        pageNum: 1,
        pageSize: 10,
        consumerAccountId: null
      },
      payrankQueryParams: {
        pageNum: 1,
        pageSize: 10,
        consumerAccountId: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        nickName: [
          {required: true, message: '昵称不能为空', trigger: 'blur'}
        ]
      },
      masterAccount: null,
      subAccounts: null,
      wxOpen: false,
      dataWxmodel: [],
      dataWxSelected: [],
      dataWxSelectRight: [],
      cid: '',
      dataStationSelected: [],
      dataStationModel: [],
      stationOpen: false,
      adminText: '仅显示管理员',
      accountDetailId: null,
      phoneNum:null,
    }
  },
  components: {accountDetail},
  created() {
    this.getList()
  },
  methods: {
    saveStationModel() {
      const params = {
        consumerId: this.cid,
        moduleIds: this.dataStationSelected
      }
      saveConsumerStationManagerModules(params).then(response => {
        this.$message({
          message: response.msg,
          type: 'success'
        })
      }).catch(err => {
        this.$message({
          message: err.msg,
          type: 'error'
        })
      })
    },
    getOrderBy(e) {
      this.dataWxSelectRight = e
    },
    saveWxModel() {
      const params = {
        consumerId: this.cid,
        moduleIds: this.dataWxSelected
      }
      saveConsumerManagerModules(params).then(response => {
        this.$message({
          message: response.msg,
          type: 'success'
        })
      }).catch(err => {
        this.$message({
          message: err.msg,
          type: 'error'
        })
      })
    },
    moveElement(array, element, steps) {
      if (this.dataWxSelectRight.length >= 2 || this.dataWxSelectRight.length < 1) {
        this.$message({
          message: '只能选择一个功能进行上下排序！',
          type: 'warning'
        })
        return false
      }
      console.log(array, element)
      // 找到元素的索引
      const index = array.indexOf(element);
      if (index === -1) {
        throw new Error('Element not found in array');
      }
      // 计算目标位置索引
      let targetIndex = index + steps;
      // 调整目标位置,不能越界
      if (targetIndex < 0) {
        targetIndex = 0;
      } else if (targetIndex >= array.length) {
        targetIndex = array.length - 1;
      }
      // 删除原索引处的元素
      array.splice(index, 1);
      // 在目标索引插入元素
      array.splice(targetIndex, 0, element);
      this.dataWxSelected = array
    },
    selected() {
      console.log(this.dataWxSelected)
    },
    handleWx(row) {
      this.dataWxSelectRight = []
      this.cid = row.id
      this.getAppletManagerModuleData(this.cid)
      this.orderTitle = '小程序功能区管理'
      this.wxOpen = true
    },
    handleStation(row) {
      this.dataWxSelectRight = []
      this.cid = row.id
      this.getStationManagerModuleData(this.cid)
      this.orderTitle = '场站功能区管理'
      this.stationOpen = true
    },
    getStationManagerModuleData(cid) {
      getStationManagerModule(cid).then(response => {
        this.dataStationModel = response.data.allStations
        this.dataStationSelected = response.data.haveStations.map(item => {
          return item.chargeStationId
        })
      })
    },
    getAppletManagerModuleData(cid) {
      getAppletManagerModule(cid).then(response => {
        this.dataWxmodel = response.data.allModules
        this.dataWxSelected = response.data.haveModules.map(item => {
          return item.moduleId
        })
      })
    },
    async getAccountDetail(id,phoneNum) {
      this.phoneNum= phoneNum
      try {
        this.accountDetailId = id
        let {data} = await getAccountDetail(this.accountDetailId)
        let {masterAccount, subAccounts} = data
        this.masterAccount = masterAccount
        this.subAccounts = subAccounts
        if (this.accountOpen) return
        this.accountOpen = true
      } catch (e) {

      }
    },
    timeChange(val) {
      if (val) {
        this.queryParams.beginTime = val[0]
        this.queryParams.endTime = val[1]
      } else {
        this.queryParams.beginTime = null
        this.queryParams.endTime = null
      }
    },
    onCopy(val) {
      this.$copyText(val).then(
        e => {
          this.$message({
            message: '复制成功',
            type: 'success'
          })
        },
        e => {
          console.log('复制失败：', e);
        }
      )
    },
    findStatus(key) {
      return statusList[key]
    },
    /** 查询用户统计列表 */
    getList() {
      this.loading = true
      listConsumer(this.queryParams).then(response => {
        this.consumerList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /** 查询用户统计列表 */
    async getPayrankList(row) {
      console.log(row)
      if (row?.masterAccountId) {
        this.payrankQueryParams.consumerAccountId = row.masterAccountId
      }
      let res = await listPayrank(this.payrankQueryParams)
      this.payrankList = res.rows
      this.payrankTotal = res.total
    },
    async getOrderInfo(row) {
      this.reset()
      this.orderParams.consumerAccountId = row.id
      let res = await getOrderInfo(row.id)
      this.orderList = res.rows
      this.orderTotal = res.total
    },
    async getOrderInfoParams() {
      let res = await getOrderInfo(this.orderParams.consumerAccountId, this.orderParams)
      this.orderList = res.rows
      this.orderTotal = res.total
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        nickName: null,
        phoneNum: null,
        openId: null,
        unionId: null,
        agreementAuthorization: null,
        createTime: null,
        lastUpdateTime: null,
        masterAccountId: null,
        version: null,
        marker: null,
        isManager: null
      }
      this.orderParams = {
        pageNum: 1,
        pageSize: 10,
        consumerAccountId: null
      }
      this.payrankQueryParams = {
        pageNum: 1,
        pageSize: 10,
        consumerAccountId: null
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      console.log(this.queryParams.beginTime)
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.beginTime = null
      this.queryParams.endTime = null
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 充电列表**/
    async handleOpenCharge(row) {
      await this.getOrderInfo(row)
      this.orderOpen = true
      this.orderTitle = '充电记录'

    },
    /** 充值列表 **/
    async handleOpenPayrank(row) {
      this.reset()
      await this.getPayrankList(row)
      this.payrankOpen = true
      this.payrankTitle = '支付记录'
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加用户统计'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getConsumer(id).then(response => {
        this.form = response.data
        this.open = true
        this.title = '修改用户统计'
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateConsumer(this.form).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addConsumer(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除用户统计编号为"' + ids + '"的数据项？').then(function () {
        return delConsumer(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('business/consumer/export', {
        ...this.queryParams
      }, `consumer_${new Date().getTime()}.xlsx`)
    },
    onlyAdmin(e) {
      if (this.queryParams.isManager == false) {
        this.queryParams.isManager = true
        this.adminText = '显示全部'
      } else {
        this.queryParams.isManager = false
        this.adminText = '仅显示管理员'
      }
      this.getList()
    }
  }
}
</script>

<style>
.stationCustom .el-transfer-panel {
  width: 300px;
  height: 500px;
}

.stationCustom .el-transfer-panel__list {
  height: 400px;
}

.searchInputStyle {
  width: 165px;
}
</style>
